.api-right {
  flex: 1;
  min-width: 0;
  height: 100%;
  overflow: auto;
  padding: 0 20px;

  .api_right-li {
    margin-top: 30px;

    .api_right-h1 {
      line-height: 48px;
      font-size: 36px;
      font-weight: 500;
      color: #1f2f3d;
      transition: color .3s ease-out;
    }

    .api_right-h2 {
      line-height: 48px;
      font-size: 28px;
      font-weight: 500;
      color: #1f2f3d;
    }

    .api_right-p1 {
      font-size: 14px;
      color: #5e6d82;
      padding: 20px 0;
    }

    .p2-box {
      border-radius: 4px;
      background-color: #f7f9fc;
    }

    .api_right-p2 {
      display: flex;
      align-items: center;
      padding: 15px 20px;
      border-radius: 4px;


      .right-p2_left {
        flex: 1;
        min-width: 0;

        span {
          font-size: 14px;
          cursor: pointer;

          i {
            font-size: 14px;
            margin-left: 20px;
            color: #b7bcc4;
          }
        }

        .left-span1 {
          background-color: #f5a623;
          font-size: 12px;
          padding: 0 2px;
          border-radius: 2px;
          margin-right: 10px;
        }

        .left-span2 {
          font-size: 14px;
          color: #4d5665;
        }

        .left-span3 {
          margin-left: 20px;
          font-size: 14px;
          color: #606c80;
        }

        .buts_1 {
          background-color: #3eb63e;
        }

        .buts_2 {
          background-color: #4a90e2;
        }

        .buts_3 {
          background-color: red;
        }
      }

      .right-p2_right {
        font-size: 14px;
        color: #999999;
        cursor: pointer;

        i {
          font-size: 18px;
          margin-right: 5px;
        }
      }

      &:hover {
        background-color: #ecf1f7;
      }
    }

    .api-table {
      margin-top: 20px;

      .cell {
        font-size: 15px;
        font-weight: 300;

        span {
          font-size: 15px;
          color: black;

          i {
            font-size: 14px;
            margin-left: 10px;
            color: #b7bcc4;
            cursor: pointer;
          }
        }
      }
    }

    .test-window {
      background-color: #eff7ff;
      padding: 20px;

      .test-window_ul {
        .test-window_li {
          display: flex;
          align-items: center;
          margin: 10px 0;

          .test-lable {
            font-size: 13px;
            width: 200px;
            text-align: right;
            padding-right: 10px;
          }

          .el-input {
            max-width: 400px;
          }
        }
      }

      .test-window_buts {
        width: 400px;
        border-radius: 4px;
        overflow: hidden;
        display: flex;
        align-items: center;
        margin-left: 200px;
        margin-top: 50px;

        .buts-text {
          flex: 1;
          background-color: #ffffff;
          text-align: center;
          padding: 10px 0;
          font-size: 14px;
          font-weight: 600;
          cursor: pointer;
          color: #3b4151;
          border: 2px solid #808080;
        }

        .buts-active {
          background-color: #4990e2;
          color: #ffffff;
          border: 2px solid #4990e2;
        }
      }

      .test-window_textarea {
        border-top: 1px solid #cbd3dc;
        margin-top: 20px;
        position: relative;

        pre {
          background-color: #41444e;
          border-radius: 4px;
          height: 400px;
          overflow: auto;
          padding: 20px;
          color: #ffffff;
          font-size: 14px;
          line-height: 25px;
        }

        .textarea-copy {
          position: absolute;
          right: 20px;
          top: 30px;
          cursor: pointer;

          i {
            font-size: 16px;
            color: #ffffff;
          }
        }
      }
    }
  }
}
